<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户管理页面</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/config.js"></script>
    <link rel="stylesheet" href="/layui/css/formSelects-v4.css">
</head>
<body>

<h2>客户管理列表</h2>
<hr>
<form action="" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">客户名称</label>
            <div class="layui-input-inline">
                <input type="text" id="kh_name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">机构名称</label>
            <div class="layui-input-inline" style="width: 300px;">
                <select name="hello" id="kh_ssjg" xm-select="kh_ssjg">
                    <option value="-1">请选择</option>
                </select>
            </div>
        </div>
        <button type="button" class="layui-btn" onclick="reloadData()" lay-submit="" lay-filter="demo1"><i class="layui-icon layui-icon-search"></i> 查询</button>

    </div>
</form>
<table class="layui-hide" lay-filter="userTable" id="userList"></table>

<script>
    $.get("http://localhost:8888/mechanism/search",function(data){
        $.each(data,function(){
            var opt = $("<option></option>").appendTo("#kh_ssjg");
            opt.text(this.jgcljg).val(this.jgId);
        });
        layui.formSelects.render();
    });
</script>
<script>
    var table ;
    function reloadData(){
        var roleIds = layui.formSelects.value('roles','val');
        //执行重载
        layui.table.reload('userList', {
            page:{
                curr:1
            },
            where:{
                kh_name : $("#kh_name").val(),
                "roleIds" : roleIds.join(",")
            }
        });
    }

    layui.config({
        base: '/layui/'
    }).extend({
        formSelects: 'formSelects-v4'
    });

    layui.use('form',function () {
        var form = layui.form;
    });
    layui.use(['table','form','formSelects'], function(){
        table = layui.table;
        var form = layui.form;
        var select = layui.formSelects;

        table.render({
            elem: '#userList'
            ,url:'http://localhost:8888/guanli/list'
            ,page: true
            ,even : true
            ,id : "userList"
            ,toolbar:'#toolbarDemo'
            ,cols: [[
                {field:'hello',type:'checkbox'},
                {field:'khId', title: 'ID', sort: true}
                ,{field:'khname', title: '客户名称'}
                ,{field:'khjgdm', title: '机构代码'}
                ,{field:'khsshy', title: '所属行业'}
                ,{field:'khxydj', title: '信用等级'}
                ,{field:'khkhlb', title: '客户类别'}
                ,{field:'khssjg', title: '所属机构'}
                ,{field:'khkhjl', title: '客户经理'}
                // ,{field:'sysRoles',  title: '所属角色', templet:function(d){
                //         if(d.sysRoles.length == 0){
                //             return "-";
                //         }
                //         let str = "";
                //         for(let role of d.sysRoles){
                //             str += role.name + " | ";
                //         }
                //         return str;
                //     }},
                // {toolbar: '#barDemo'}
            ]]
        });

        //监听行内的工具条
        table.on('tool(userTable)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if(layEvent === 'del'){ //删除
                // layer.confirm('真的删除吗',function (index) {
                //     layer.close(index);
                //     $.post("http://localhost:8888/user/delete",{id:data.id},function (d) {
                //         table.reload("userList",{
                //             page:{
                //                 curr:1
                //             }
                //         });
                //     });
                // })
            }else if (layEvent === 'edit'){//TODO 编辑
                // $.get('add.html',function (s) {
                //     layer.open({
                //         type : 1,
                //         title : '修改用户',
                //         area:'800px',
                //         content:s,
                //         btn : ['确定','取消'],
                //         success:function(){
                //             //对表单回填数据
                //             data.locked = data.locked == 0 ? null : data.locked;
                //             form.val('userForm',data);
                //
                //             var rids = [];
                //             for(let role of data.sysRoles){
                //                 rids.push(role.id);
                //             }
                //             var t =setInterval(function () {
                //                 console.log("waiting....");
                //                 if($("#roles_add option").length > 1){
                //                     select.value('roles2',rids);
                //                     clearInterval(t);
                //                 }
                //             },100)
                //
                //         },
                //         yes : function () {
                //             var str = $("#add_users_form").serialize();
                //             $.post(`${new Config().base_url}/user/edit`,str,function (data) {
                //                 layer.close(layer.index);
                //                 table.reload('userList');
                //             });
                //         }
                //     })
                // })
            } else if (layEvent === 'detail'){ //TODO 查看详情

            }
        });


        //头工具栏事件
        table.on('toolbar(userTable)', function(obj){
            //获取选中行
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                // case 'batchDelete': //批量删除
                //     var data = checkStatus.data;
                //     if(data.length == 0){
                //         layer.msg('请选择要删除的数据行');
                //         return;
                //     }
                //     layer.confirm("确定要删除选中的数据吗？",function (index) {
                //         var p = "?";
                //         for(let role of data){
                //             p += `id=${role.id}&`;
                //         }
                //
                //         $.post(`http://localhost:8888/user/batchDelete${p}`,d => {
                //             layer.close(index);
                //         table.reload("userList");
                //     });
                //     })
                //     break;
                case 'add':
                    // $.get("add.html",function (data) {
                    //     layer.open({
                    //         type : 1,
                    //         title : '添加用户',
                    //         skin : 'layui-layer-molv',
                    //         anim:0,
                    //         area : '800px',
                    //         maxmin:true,
                    //         content : data,
                    //         btn : ['确定','取消'],
                    //         yes : function () {
                    //             var str = $("#add_users_form").serialize();
                    //             $.post(`${new Config().base_url}/user/add`,str,function (data) {
                    //                 layer.close(layer.index);
                    //                 table.reload('userList');
                    //             });
                    //         }
                    //     })
                    //
                    // });
                    // break;
                case 'isAll':
                    // layer.msg(checkStatus.isAll ? '全选': '未全选');
                    // break;
            };
        });
    });
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="import">批量导入</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="detail"><i class="layui-icon layui-icon-app"></i></a>
    <a lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>

</body>
</html>